<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天记录</title>

    <style>
        html,
        body {
            height: 100%;
        }

        body {
            background-image: url("../res/images/chat_bg.png");
            background-size: 100% 100%;
        }

        html,
        body,
        ul,
        li,
        dd,
        dl,
        p {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        section,
        footer,
        header,
        article {
            display: block;
            padding: 0;
            margin: 0;
        }

        .main {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            margin-top: 20px;
        }

        .main header {
            background-color: #42494b;
            height: 60px;
            border-radius: 4px 4px 0 0;
        }

        header #selectSale {
            line-height: 60px;
            padding-right: 40px;
            color: #fff;
            float: right;
            cursor: pointer;
        }

        .main article {
            height: 540px;
            /* border: 1px solid red; */
            box-sizing: border-box;
            display: flex;
            position: relative;
        }

        article .saleListBox {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #efefef;
            z-index: 1;
        }
        article .saleListBox .saleList_scroll{
            height: 480px;
            overflow-y: scroll;
        }
        
        article .saleListBox .queryBar {
            text-align: right;
            margin: 10px 10px 10px 0;
        }
        article .saleListBox .queryBar .closeSaleListBox{
            float: left;
            margin-left: 20px;
            display: block;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 18px;
            border-radius: 50%;
            border: 1px solid #999;
            color: #999;
            cursor: pointer;
        }
        article .saleListBox .saleList {
            display: flex;
            flex-wrap: wrap;
        }

        article .saleListBox .saleList li,article .saleListBox .saleList div {
            padding: 5px;
            border: 1px solid #999;
            background-color: #fff;
            border-radius: 4px;
            margin: 10px;
            cursor: pointer;
        }
        article .saleListBox .saleList li.on{
            border: 2px solid #009688;
        }

        article .saleListBox .saleList .saleLogo {
            width: 78px;
            height: 78px;
            border-radius: 50%;
        }
        article .saleListBox .saleList li.on .saleName{
            color: #009688;
        }
        article .saleListBox .saleList .saleName {
            width: 78px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;

            vertical-align: middle;
            font-size: 12px;
            color: #999;
        }
        article .fansListBox{
            height: 540px;
            overflow-y: scroll;
            overflow-x: hidden;
            border-left: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            background-color: #fff;
            box-sizing: border-box;
        }
        article .fansList {
            width: 230px;
            padding: 0;
            margin: 0;
            background-color: #fff;
            
        }
        ::-webkit-scrollbar{width: 0px;}
        article .chatLogListBox{
            height: 100%;
            width: 580px;
            /* border: 1px solid red; */
            padding: 10px;
            box-sizing: border-box;
            background-color: #f5f5f5;
            overflow-y: scroll!important;
            overflow-x: hidden!important;
            position: relative;
        }
        .backTop{
            font-size: 14px;
            display: block;
            background-color: #fff;
            border: none;
            width: 20px;
            text-align: center;
            height: 20px;
            line-height: 19px;
            border-radius: 50%;
            transform: rotateZ(90deg);
            float: right;
            position: relative;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }
        article .chatLog {
            display: none;
            
        }

        article .fansList li {
            /* text-align: center; */
            padding: 10px;
            border-bottom: 1px solid #f5f5f5;
            box-sizing: border-box;


        }

        article ul li.on {
            background-color: #f5f5f5;
        }

        .chatListCard {
            display: flex;
        }

        .chatListCard .userlogo {
            width: 40px;
            margin-right: 6px;
        }
        .chatListCard .fansname{
            width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
            line-height: 20px;
            color: #333;
        }
        .lastContent {
            width: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
            color: #999;
        }

        .chatListCardTime {

            font-size: 10px;
            color: #aaaaaa;
        }

        /* layui */

        article .chatLog li {
            position: relative;
            font-size: 14px;
            margin-bottom: 10px;
            padding-left: 60px;
            min-height: 68px;
        }

        article .chatLog li.layim-chat-mine {
            text-align: right;
            padding-left: 0;
            padding-right: 60px
        }

        .layim-chat-main ul li {
            position: relative;
            font-size: 0;
            margin-bottom: 10px;
            padding-left: 60px;
            min-height: 68px;
        }

        .layim-chat-mine .layim-chat-user {
            left: auto;
            right: 3px;
        }

        .layim-chat-mine .layim-chat-text {
            margin-left: 0;
            text-align: left;
            background-color: #5FB878;
            color: #fff;
        }

        .layim-chat-mine .layim-chat-user cite {
            left: auto;
            right: 60px;
            text-align: right;
        }

        .layim-chat-mine .layim-chat-user cite i {
            padding-left: 0;
            padding-right: 15px;
        }

        .layim-chat-user {
            position: absolute;
            left: 3px;
        }

        .layim-chat-text {
            position: relative;
            line-height: 22px;
            margin-top: 25px;
            padding: 8px 15px;
            background-color: #e2e2e2;
            border-radius: 3px;
            color: #333;
            word-break: break-all;
        }

        .layim-chat-user img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            vertical-align: middle;
        }

        .layim-chat-user cite {
            position: absolute;
            left: 60px;
            top: -2px;
            width: 500px;
            line-height: 24px;
            font-size: 12px;
            white-space: nowrap;
            color: #999;
            text-align: left;
            font-style: normal;
        }

        .layim-chat-user cite i {
            padding-left: 15px;
            font-style: normal;
        }

        .layim-chat-text,
        .layim-chat-user {
            display: inline-block;
            vertical-align: top;
            font-size: 14px;
        }

        .layim-chat-text:after {
            content: '';
            position: absolute;
            left: -10px;
            top: 13px;
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            border-color: #e2e2e2 transparent transparent;
            overflow: hidden;
            border-width: 10px;
        }

        .layim-chat-mine .layim-chat-text:after {
            left: auto;
            right: -10px;
            border-top-color: #5FB878;
        }

        .layui-input:hover,
        .layui-textarea:hover {
            border-color: #D2D2D2!important;
        }

        .layui-input,
        .layui-textarea {
            border-color: #eee!important;
            padding-left: 10px;
        }

        .layui-input,
        .layui-select,
        .layui-textarea {
            height: 30px;
            line-height: 1.3;
            line-height: 30px\9;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
        }

        .layui-btn {
            display: inline-block;
            height: 34px;
            line-height: 34px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .layui-btn:hover {
            opacity: .8;
            filter: alpha(opacity=80);
            color: #fff;
        }
        .layim-chat-system {
            min-height: 0;
            margin: 20px 0 5px 0;
            padding: 0 !important;
            text-align: center;
        }
        .layim-chat-system span {
            display: inline-block;
            line-height: 30px;
            padding: 0 15px;
            border-radius: 3px;
            background-color: #ddd;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
    <link rel="stylesheet" href="/dvmini/res/plugins/photoswipe/photoswipe.css">
    <link rel="stylesheet" href="/dvmini/res/plugins/photoswipe/default-skin/default-skin.css">
</head>

<body>
    <section class="main">
        <header>
            <button class="backTop" title="返回顶部">&lt;</button>
            <span id="selectSale" title="选择其他销售">选择销售</span>
        </header>
        <article>
            <div class="fansListBox">
                <ul class="fansList">
                    <!-- <li class="on">
                        <div class="chatListCard">
                            <div>
                                <img class="userlogo" src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5MJh8ohcmrmClwAw5fty11bQUJw4LsePfldibjGcicDZeQ/132" alt="">
                            </div>
                            <div>
                                <p>微信昵称</p>
                                <p>
                                    <span class="lastContent">最近的一条消息</span>
                                    <span class="chatListCardTime">14:21:20</span>
                                </p>
                            </div>
                        </div>
                    </li> -->
                    
                </ul>
            </div>
            
            <div class="saleListBox">
                <div class="queryBar">
                    <span class="closeSaleListBox" id="closeSaleListBox">x</span>
                    <input type="text" id="querySaleListVal" class="layui-input" placeholder="请输入销售名称">
                    <button class="layui-btn" id="querySaleListBtn">查找</button>
                </div>
                <div class="saleList_scroll">
                    <ul class="saleList">
                        <!-- <li class="on">
                            <img class="saleLogo" src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5MJh8ohcmrmClwAw5fty11bQUJw4LsePfldibjGcicDZeQ/132" alt="">
                            <p class="saleName">我是销售</p>
                        </li>
                        <li>
                            <img class="saleLogo" src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5MJh8ohcmrmClwAw5fty11bQUJw4LsePfldibjGcicDZeQ/132" alt="">
                            <p class="saleName">我是销售</p>
                        </li>
                        <li>
                            <img class="saleLogo" src="http://wx.qlogo.cn/mmhead/Q3auHgzwzM5MJh8ohcmrmClwAw5fty11bQUJw4LsePfldibjGcicDZeQ/132" alt="">
                            <p class="saleName">我是销售</p>
                        </li> -->
                        
                    </ul>
                </div>
            </div>
            <div class="chatLogListBox">
                
                <!-- <ul class="chatLog">
                    <li>
                        <div class="layim-chat-user">
                            <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                            <cite>贤心
                                <i>2017-06-30 17:44:43</i>
                            </cite>
                        </div>
                        <div class="layim-chat-text">洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！
                            <img alt="[哈哈]" title="[哈哈]" src="http://res.layui.com/layui/dist/images/face/2.gif"> </div>
                    </li>
                    <li class="layim-chat-mine">
                        <div class="layim-chat-user">
                            <img src="http://res.layui.com/images/fly/avatar/00.jpg">
                            <cite>
                                <i>2017-06-30 17:44:42</i>纸飞机</cite>
                        </div>
                        <div class="layim-chat-text">大撒撒旦</div>
                    </li>
                    <li>
                        <div class="layim-chat-user">
                            <img src="http://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
                            <cite>贤心
                                <i>2017-06-30 17:44:43</i>
                            </cite>
                        </div>
                        <div class="layim-chat-text">洗澡中，，个体四十，团体话：一般人我不告诉他！
                        </div>
                    </li>
                    <li class="layim-chat-mine">
                        <div class="layim-chat-user">
                            <img src="http://res.layui.com/images/fly/avatar/00.jpg">
                            <cite>
                                <i>2017-06-30 17:44:42</i>纸飞机</cite>
                        </div>
                        <div class="layim-chat-text">大撒撒asdas大三大四阿斯达岁的阿大使,阿斯达斯d旦</div>
                    </li>
                </ul> -->
            </div>
            

        </article>
    </section>
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="pswp__bg"></div>
            <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                    <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                    <div class="pswp__top-bar">
                        <div class="pswp__counter"></div>
                        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                        <div class="pswp__preloader">
                            <div class="pswp__preloader__icn">
                                <div class="pswp__preloader__cut">
                                    <div class="pswp__preloader__donut"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                        <div class="pswp__share-tooltip"></div>
                    </div>
                    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                    <div class="pswp__caption">
                        <div class="pswp__caption__center"></div>
                    </div>
                </div>
            </div>
        </div>
    <script src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
    <script src="/dvmini/res/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
	<script src="/dvmini/res/plugins/photoswipe/photoswipe.min.js"></script>
    <script>
        function Chat() {
            this.saleid_select = 0              //当前的销售ID
            this.sale_query_page = 1            //销售查询后的页码
            this.fans_query_page = 1            //粉丝查询后的页码
            this.chat_query_page = 1            //聊天查询后的页码

            this.faceCode = ["/::)", "/::~", "/::B", "/::|", "/:8-)", "/::<", "/::$", "/::X", "/::Z", "/::'(", "/::-|", "/::@", "/::P", "/::D", "/::O", "/::(", "/::+", "/:–b", "/::Q", "/::T", "/:,@P", "/:,@-D", "/::d", "/:,@o", "/::g", "/:|-)", "/::!", "/::L", "/::>", "/::,@", "/:,@f", "/::-S", "/:?", "/:,@x", "/:,@@", "/::8", "/:,@!", "/:!!!", "/:xx", "/:bye", "/:wipe", "/:dig", "/:handclap", "/:&-(", "/:B-)", "/:<@", "/:@>", "/::-O", "/:>-|", "/:P-(", "/::'|", "/:X-)", "/::*", "/:@x", "/:8*", "/:pd", "/:<W>", "/:beer", "/:basketb", "/:oo", "/:coffee", "/:eat", "/:pig", "/:rose", "/:fade", "/:showlove", "/:heart", "/:break", "/:cake", "/:li", "/:bome", "/:kn", "/:footb", "/:ladybug", "/:shit", "/:moon", "/:sun", "/:gift", "/:hug", "/:strong", "/:weak", "/:share", "/:v", "/:@)", "/:jj", "/:@@", "/:bad", "/:lvu", "/:no", "/:ok", "/:love", "/:<L>", "/:jump", "/:shake", "/:<O>", "/:circle", "/:kotow", "/:turn", "/:skip", "/:oy", "/:#-0", "/:oy", "/:kiss", "/:<&", "/:&>"]
                this.faceText = ["微笑", "撇嘴", "色", "发呆", "得意", "流泪", "害羞", "闭嘴", "睡", "大哭", "尴尬", "发怒", "调皮", "呲牙", "惊讶", "难过", "酷", "冷汗", "抓狂", "吐", "偷笑", "愉快", "白银", "傲慢", "饥饿", "困", "恐慌", "流汗", "憨笑", "悠闲", "奋斗", "咒骂", "疑问", "嘘", "晕", "疯了", "哀", "骷髅", "敲打", "再见", "擦汗", "抠鼻", "鼓掌", "糗大了", "坏笑", "左哼哼", "右哼哼", "哈欠", "鄙视", "委屈", "快哭了", "阴险", "亲亲", "吓", "可怜", "菜刀", "西瓜", "啤酒", "篮球", "乒乓", "咖啡", "饭", "猪头", "玫瑰", "凋谢", "嘴唇", "爱心", "心碎", "蛋糕", "闪电", "炸弹", "刀", "足球", "瓢虫", "便便", "月亮", "太阳", "礼物", "拥抱", "强", "弱", "握手", "胜利", "抱拳", "勾引", "拳头", "差劲", "爱你", "NO", "OK", "爱情", "飞吻", "跳跳", "发抖", "怄火", "转圈", "磕头", "回头", "跳绳", "投降", "激动", "乱舞", "献吻", "左太极", "右太极"]
                this.faceText2 = ["/微笑","/撇嘴","/色","/发呆","/得意","/流泪","/害羞","/闭嘴","/睡","/大哭","/尴尬","/发怒","/调皮","/呲牙","/惊讶","/难过","/酷","/冷汗","/抓狂","/吐","/偷笑","/愉快","/白银","/傲慢","/饥饿","/困","/恐慌","/流汗","/憨笑","/悠闲","/奋斗","/咒骂","/疑问","/嘘","/晕","/疯了","/哀","/骷髅","/敲打","/再见","/擦汗","/抠鼻","/鼓掌","/糗大了","/坏笑","/左哼哼","/右哼哼","/哈欠","/鄙视","/委屈","/快哭了","/阴险","/亲亲","/吓","/可怜","/菜刀","/西瓜","/啤酒","/篮球","/乒乓","/咖啡","/饭","/猪头","/玫瑰","/凋谢","/嘴唇","/爱心","/心碎","/蛋糕","/闪电","/炸弹","/刀","/足球","/瓢虫","/便便","/月亮","/太阳","/礼物","/拥抱","/强","/弱","/握手","/胜利","/抱拳","/勾引","/拳头","/差劲","/爱你","/NO","/OK","/爱情","/飞吻","/跳跳","/发抖","/怄火","/转圈","/磕头","/回头","/跳绳","/投降","/激动","/乱舞","/献吻","/左太极","/右太极"]
                this.faceImg = ["http://www.onegreen.net/QQ/UploadFiles/201404/20140427102755304.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102806118.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102811204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102816272.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102821779.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102826616.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102831909.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102836860.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102841446.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102846605.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102851155.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102856815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102901326.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102906485.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102911867.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102916775.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102921112.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102926579.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102931107.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102936174.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102941562.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102946241.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102951305.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427102956983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103001341.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103006230.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103011620.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103016770.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103021180.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103026333.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103031826.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103036856.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103041851.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103046204.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103051515.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103056368.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103101584.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103106639.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103111714.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103116995.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103121307.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103126628.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103131537.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103136922.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103141708.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103146409.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103151786.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103156150.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103201493.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103206968.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103211938.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103216563.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103221494.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103226447.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103231181.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103236908.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103241610.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103246942.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103251889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103256822.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103301730.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103306315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103311631.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103316218.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103321727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103326466.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103331391.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103336293.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103341727.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103346519.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103351983.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103356315.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103401393.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103406284.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103411342.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103416889.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103421513.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103426896.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103431815.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103436286.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103441411.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103446541.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103451461.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103456248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103501861.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103506188.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103511436.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103516890.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103521415.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103526248.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103531694.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103536789.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103541535.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103546800.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103551956.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103556647.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103601489.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103606571.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103611997.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103616555.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103621939.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103626894.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103636123.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103641405.png", "http://www.onegreen.net/QQ/UploadFiles/201404/20140427103646322.png"]

            this.bind()
        }
        Chat.prototype = {
            getSaleList: function (page_, keywork_) {
                keywork_ = keywork_ || ""
                page_ = page_ || 1

                $.post("/dvmini/sale/getSalesList",{keywork:keywork_,page:page_},function(data){
                    if(data.code == 0){
                        data.data.rows = data.data.rows ? data.data.rows : []
                        var str =""
                        data.data.rows.forEach(function(e,i) {
                            str += '<li data-id="'+ e.id +'">'+
                                        '<img class="saleLogo" src="../res/images/default_user.png" alt="">'+
                                        '<p class="saleName">'+ e.name +'</p>'+
                                    '</li>'
                        });
                        if(data.data.page < data.data.totalPages){
                            str += '<div data-page="'+ (data.data.page+1) +'" class="getMoreSale">'+
                                        '<img class="saleLogo" src="../res/images/chat_add_sale.png" alt="">'+
                                        '<p class="saleName">更多</p>'+
                                    '</li>'
                        }
                        if(!!keywork_){
                            $(".saleList").html(str)
                        }else{
                            $(".saleList").append(str)

                        }
                    }
                })
            },
            getUserList: function (salesId_,page_) {                                     //---获取粉丝列表
                var that = this
                $.post('/dvmini/sale/chatlogList?salesId='+ salesId_ + '&page=' + page_, function (data) {
                    if(data.code == 0){
                        $(".saleListBox").hide()
                        data.data = data.data ? data.data : []
                        var str = ''
                        data.data.forEach(function(e,i){
                            str += '<li data-id="'+ e.fansid +'">'+
                                        '<div class="chatListCard">'+
                                            '<div>'+
                                                '<img class="userlogo" src="'+ (e.logo ? e.logo : '../res/images/default_user.png' ) +'" alt="">'+
                                            '</div>'+
                                            '<div>'+
                                                '<p class="fansname">'+ (e.nickname ? e.nickname : ('客户 : ' + e.fansid)) +'</p>'+
                                                '<p>'+
                                                    '<span class="lastContent">'+ (e.reply ? e.reply : '-') +'</span>'+
                                                    '<span class="chatListCardTime">'+ that._toTime_G(e.asktime) +'</span>'+
                                                '</p>'+
                                            '</div>'+
                                        '</div>'+
                                    '</li>'
                        })
                        $(".fansList").append(str)
                    }
                })
            },
            
            
            getUserChatLogList: function (_page,_fansid,_messageid) {                                  //获取聊天记录
                var that = this 
                var _saleid = this.saleid_select
                $.post('/dvmini/sale/chatlogList?salesId='+ _saleid +'&page='+ _page +'&fansId=' + _fansid,function(data){
                    if(data.code == 0){
                        var str = ''
                        data.data.data = data.data.data ? data.data.data : []
                        data.data.data.reverse().forEach(function(e){
                            str += that.fansChatLogTemplate(e)
                        })
                        $('[data-messageid="'+ _messageid +'"]').prepend(str)



                        var page_item = Math.ceil(data.data.count / 20)          //当前粉丝的聊天记录的总页数
                            
                            
                        if(page_item > _page){
                            _page = _page + 1
                            that.create_getMore({
                                messageid:_messageid,
                                saleid : _saleid,
                                fansid : _fansid,
                                message:"查看更多",
                                page:_page
                            })
                        }else{
                           

                            that.create_warn({messageid:_messageid,message:"没有更多记录",sort:"sort"})
                        }
                        var showimg = new Showimg('[data-messageid="'+ _messageid +'"].userimg')
		                showimg.bind()
                    }
                })
            },
            create_Img:function(msg){                                                                           //---创建一个图片标签并返回
                var randomVal = Math.random().toString(36).substr(2);
                var str = '<image src="'+ msg +'?'+ randomVal +'" class="userimg" alt="">'
                return str
            },
            create_warn: function (msg) {                                                                       //---创建一个警告提示消息
                var template = '<li class="layim-chat-system">' +
                    '<span>' + msg.message + '</span>' +
                    '</li>'
                
                var _height = $("[data-messageid='" + msg.messageid + "']").height()
                if(msg.sort){
                    $("[data-messageid='" + msg.messageid + "']").prepend(template)
                }else{
                    $("[data-messageid='" + msg.messageid + "']").append(template)
                    $("[data-messageid='" + msg.messageid + "']").parent().scrollTop(_height)

                }
            },
            create_getMore:function(msg){                                                                       //---创建一个拉取更多的按钮
                var that = this
                console.log(msg)
                var template = '<li class="layim-chat-system postMore" data-messageid="'+ msg.messageid +'" data-saleid="'+ msg.saleid +'" data-fansid="'+ msg.fansid +'"  data-page="'+msg.page+'">' +
                    '<span>' + msg.message + '</span>' +
                    '</li>'
                $("[data-messageid='" + msg.messageid + "']").prepend(template)
                
            },
            toFaceCode: function (msg) {                                                                        //---表情文字转代码
                var _msg = msg
                var reg = /\[.*?\]/g;
                var some = reg.exec(_msg);                //匹配到的字段

                while (some) {
                    var _some = some[0].replace(/\[/, "")
                    _some = _some.replace(/\]/, "")
                    var index = this.faceText.indexOf(_some)
                    msg = msg.replace(new RegExp(_some, 'g'), this.faceCode[index])
                    some = reg.exec(_msg);
                }
                msg = msg.replace(/\[/g, "")
                msg = msg.replace(/\]/g, "")
                return msg
            },
            toFaceImg: function (msg) {                                                                         //---表情文字转图片
                var _msg = msg
                var reg = /\[.*?\]/g;
                var some = reg.exec(_msg);                //匹配到的字段
                var isReset = false

                while (some) {
                    var _some = some[0].replace(/\[/, "")
                    _some = _some.replace(/\]/, "")
                    var index = this.faceText.indexOf(_some)
                    if(index >-1){
                        msg = msg.replace(new RegExp(_some, 'g'), '<image src="'+ this.faceImg[index] +'" alt="">') 

                    }else{
                        isReset = "[" + _some + "]"
                    }
                    some = reg.exec(_msg);
                }
                var that = this
                this.faceText2.forEach(function(e,i){
                    var reg2 = new RegExp(e,"g")
                    if(reg2.test(msg)){
                        msg = msg.replace(reg2,'<image src="'+ that.faceImg[i] +'" alt="">'   )

                    }
                })
                
                msg = msg.replace(/\[/g, "")
                msg = msg.replace(/\]/g, "")
                msg = msg.replace(/</g,"&lt;")
                msg = msg.replace(/&lt;image/g,"<img")
                if(isReset){
                    return isReset
                }else{
                    return msg
                }
                
            },
            fansChatLogTemplate:function(msg){
                var b_isMe = !(msg.replytype == 9 || msg.replytype == 11)       //是否是销售本人(Boolean )    f废弃 (至判断是否有消息内容)
                
                    b_isMe = (!!msg.reply && !!!msg.ask)
                

                var isMeClass = b_isMe ? "layim-chat-mine" : ""                 //是否是销售本人(ClassName)
                var msg__ = b_isMe ? msg.reply : msg.ask                        //对应的选择消息
                var logo = (function(){
                    var _logo = ""
                    if(msg.replytype == 1 || msg.replytype == 2 || msg.replytype == 3){
                        _logo = "../res/images/robot_logo.png"
                    }else{
                        _logo = (b_isMe ? '../res/images/vanke_logo.png' : (msg.logo || "../res/images/default_user.png"))
                    }
                    return _logo
                })()
                
                var name = (function(){
                    var _name = ""
                    if(msg.replytype == 1 || msg.replytype == 2 || msg.replytype == 3 ){
                        _name = "机器人"
                    }else{
                        _name = (b_isMe ? (msg.salename || "vanke" ): (msg.nickname || "客户 : " + msg.fansid))
                    }
                    return _name
                })()
                if(msg.replytype == 9){
                    b_isMe = false
                    msg__ = this.create_Img(msg)
                }else{
                    msg__ = this.toFaceImg(msg__)
                }
                var template = ""
                if(!!msg.ask || !!msg.imgurl){
                    template += '<li>'+
                                    '<div class="layim-chat-user">'+
                                        '<img src="' + (msg.logo || "../res/images/default_user.png") + '">'+
                                        '<cite>'+ (msg.nickname || "客户 : " + msg.fansid) +
                                            '<i>'+ this._toTime_G(msg.asktime) +'</i>'+
                                        '</cite>'+
                                    '</div>'+
                                    '<div class="layim-chat-text">'+ (!!msg.imgurl ? this.create_Img(msg.imgurl) : this.toFaceImg(msg.ask)) + '</div>'+
                                '</li>'
                }
                if(!!msg.reply || !!msg.imgurl2){
                    template += '<li class="layim-chat-mine">'+
                                '<div class="layim-chat-user">'+
                                    '<img src="'+ (msg.replytype < 4 ? "../res/images/robot_logo.png" : "../res/images/vanke_logo.png") +'">'+
                                    '<cite>'+
                                        '<i>'+  this._toTime_G(msg.asktime) +'</i>'+ (msg.replytype < 4 ? "机器人" : (msg.salename || "vanke" )) +'</cite>'+
                                '</div>'+
                                '<div class="layim-chat-text">'+ (!!msg.imgurl2 ? this.create_Img("http://" + msg.imgurl2) : this.toFaceImg(msg.reply)) +'</div>'+
                            '</li>'
                }
                
                
                
                
                return template
            },
            createChatBox: function (messageid) {                                   //创建一个消息盒子
                var str ='<ul class="chatLog" data-messageid="'+ messageid +'"><ul>'
                $('.chatLogListBox').append(str)
            },
            _toTime_G: function (v) {                                                                           //--- 转时间
                var time = new Date(v)
                var year = time.getFullYear()
                var mon = time.getMonth() + 1;
                var day = time.getDate();
                var hour = time.getHours();
                var min = time.getMinutes();
                if (mon < 10) mon = "0" + mon
                if (day < 10) day = "0" + day
                if (hour < 10) hour = "0" + hour
                if (min < 10) min = "0" + min
                return mon + "-" + day + " " + hour + ":" + min
            },
            _isNewChat: function (msg) {                                                                        //---是否是新的会话
                    var _isNew = true
                    $("[data-messageid]").each(function () {
                        if ($(this).data("messageid") == msg) {
                            _isNew = false
                        }
                    })
                    return _isNew
            },
            bind: function () {                                            //---绑定元素

                var that = this
                //唤起销售列表
                $("#selectSale").click(function(){
                    
                    if($(".saleList li").length < 1){
                        that.getSaleList()
                    }
                    $(".saleListBox").show()
                })
                $("#closeSaleListBox").click(function(){
                    $(".saleListBox").hide()
                })
                //选择销售
                $(document).on("click",".saleList li",function(){     
                    $(".saleList li").removeClass("on")
                    $(this).addClass("on")
                    var _saleid = $(this).data("id")
                    that.fans_query_page = 1        
                    that.saleid_select = $(this).data("id")
                    that.getUserList(_saleid, 1)
                    $(".fansList").html('')
                    $(".chatLog").hide()
                })
                //查询销售
                $("#querySaleListBtn").click(function(){
                    var _work =  $("#querySaleListVal").val()
                    that.sale_query_page = 1
                    that.getSaleList(1,_work)
                })
                //查询销售列表下一页
                $(document).on("click",".getMoreSale",function(){
                    var _page = $(this).data("page")
                    that.getSaleList(_page)
                    $(this).remove()
                })
                //查询聊天记录下一页
                $(document).on("click",".postMore",function(){
                    var _page = $(this).data("page")
                    var _fansid = $(this).data("fansid")
                    var _messageid = $(this).data("messageid")
                    that.getUserChatLogList (_page,_fansid,_messageid) 
                    $(this).remove()
                })
                
                //切换粉丝对话框
                $(document).on("click",".fansList li",function(){
                    var _fansid = $(this).data("id")
                    var _saleid = that.saleid_select
                    var _messageid = _saleid + "_" + _fansid
                    $('.fansList li').removeClass('on')
                    $(this).addClass("on")
                    if(that._isNewChat(_messageid)){
                        that.createChatBox(_messageid)
                        that.getUserChatLogList(1,_fansid,_messageid)     //需要把当前的page置为1
                    }
                    $(".chatLog").hide()
                    $('[data-messageid="'+ _messageid +'"]').show()
                })
                $(".backTop").on("click",function(){
                    $(this).attr("disabled",true)
                    $(".chatLogListBox").animate({scrollTop:0},500,function(){
                        $(".backTop").attr("disabled",false)
                    })
                })
                $("#selectSale").click()
            }
        }
        var chat = new Chat()

        function Showimg(el) {
			this.el = el
		}

		Showimg.prototype = {
			getitems: function (el) { //获取items数组对象
				var list = document.querySelectorAll(el)
				var items = []
				for (i = 0; i < list.length; i++) {
					var obj = {}
					obj.src = list[i].src
					obj.h = list[i].naturalHeight
					obj.w = list[i].naturalWidth
					items.push(obj)
				}
				return items
			},
			ceratePhoto: function (i) { //初始化新的相册框
				var pswpElement = document.querySelectorAll('.pswp')[0];
				var items = this.getitems(this.el);
				var options = {
					history: false,
					focus: false,
					index: i,
					showAnimationDuration: 0,
					hideAnimationDuration: 0
				};
				gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
				gallery.init()
			},
			bind: function () { //绑定click事件
				var that = this
				$(document).off("click", this.el)
				$(document).on("click", this.el, function () {
					var index = $(this).index(that.el)
					that.ceratePhoto(index)
				})
				$(this.el).click(function () { })
			}
		}

		var showimg = new Showimg(".userimg")
		showimg.bind()
        
    </script>
</body>

</html>